import React from 'react';
import { Link, useIntl } from 'umi'; // 引入 Link 组件
import Styles from './BatteryCard.less';

export interface Battery {
  type: 'battery' | 'cabinet' | 'pcs' | 'cell';
  title: string;
  materialsNumber?: number;
  link?: string; // 链接字段为可选
}

export interface BatteryCardProps {
  materials: Battery[];
}

const getBorderColor = (type: string): string => {
  switch (type) {
    case 'battery':
      return '#1A6CFE';
    case 'cabinet':
      return '#56D433';
    case 'pcs':
      return '#FFD50C';
    case 'cell':
      return '#FF7A0C';
    default:
      return '#000';
  }
};

const BatteryCard: React.FC<BatteryCardProps> = ({ materials }) => {
  const intl = useIntl();
  const isEnglish = intl.locale === 'en-US';
  const className = `${Styles.BatteryWrap} ${isEnglish ? Styles.BatteryWrapEn : ''}`;
  return (
    <div>
      {materials.map((material, index) => (
        <div
          key={index}
          className={className}
          style={{
            borderLeft: `8px solid ${getBorderColor(material.type)}`,
          }}
        >
          {material.link ? (
            <Link to={material.link} style={{ textDecoration: 'none', color: 'inherit' }}>
              <h3 className={Styles.BatteryTitle}>{material.title}</h3>
              <p
                className={Styles.BatteryNumber}
                style={{ color: `${getBorderColor(material.type)}` }}
              >
                {material.materialsNumber ? material.materialsNumber : '--'}
              </p>
            </Link>
          ) : (
            <>
              <h3 className={Styles.BatteryTitle}>{material.title}</h3>
              <p
                className={Styles.BatteryNumber}
                style={{ color: `${getBorderColor(material.type)}` }}
              >
                {material.materialsNumber ? material.materialsNumber : '--'}
              </p>
            </>
          )}
        </div>
      ))}
    </div>
  );
};

export default BatteryCard;
